import React from "react";
import {
  G2,
  Chart,
  Geom,
  Axis,
  Tooltip,
  Coord,
  Label,
  Legend,
  View,
  Guide,
  Shape,
  Facet,
  Util
} from "bizcharts";

class Basic extends React.Component {
  render() {
    const data = this.props.data;
    const flag = this.props.flag;
    const cols = {
      y: {
        min: 0
      },
      x: {
        range: [0, 1]
      }
    };
    return (
      <div>
        <Chart padding={[ 30, 50, 50, 60]} width={window.innerWidth}
          height={window.innerHeight - 220} data={data} scale={cols} forceFit>
          <Axis name="x" />
          {flag ? <Axis name="y" label={{
          		formatter(text, item, index) {
                if(index == 0){
                }else if(index  == 1){
                	return `四级警长`;
                }else if(index  == 2){
                	return `三级警长`;
                }else if(index  == 3){
                	return `二级警长`;
                }else if(index  == 4){
                	return `一级警长`;
                }
          		}
          	}} /> : <Axis name="y" />}
          <Tooltip
            crosshairs={{
              type: "y"
            }}
          />
          <Geom type="line" position="x*y" size={2} />
          <Geom
            type="point"
            position="x*y"
            size={4}
            shape={"circle"}
            style={{
              stroke: "#fff",
              lineWidth: 1
            }}
          />
        </Chart>
      </div>
    );
  }
}

export default Basic;
